{% extends "manage.html" %}
{% load custom_filters %}
{% load static %}
{% block title %} Monitor {% endblock %}
{% block pagetitle %} Monitor {% endblock pagetitle %}

{% block meta %} <meta http-equiv="refresh" content="30"/> {% endblock meta %}

{% block script %}
{% if papers %}
<script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}">
</script>
<script type="text/javascript">
$(document).ready(function()
    { 
        $("#result-table").tablesorter({sortList: [[5,1]]});
        var papers_length = "{{papers|length}}";
        for (var i=0; i < papers_length; i++){
            var time_left = $("#time_left"+[i]);
            var time = time_left.text();
            var hh   = Math.floor(time / 3600);
            var mm = Math.floor((time - (hh * 3600)) / 60);
            var ss = time - (hh * 3600) - (mm * 60);
            time_left.text(hh + ":" + mm + ":" + ss)
    }
});
</script>
{% endif %}
{% endblock %}

{% block content %}
<div class="container">
    {# ############################################################### #}
    {# This is rendered when we are just viewing exam/monitor #}
    {% if objects %}
    {% include "yaksh/paginator.html" %}
    <div id="accordion">
        {% for course in objects %}
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-9">
                            <h5 data-toggle="tooltip" title="{{course.name}}">
                                {{ course.name }}
                            </h5>
                        </div>
                        <div class="col-md">
                            <a class="card-link btn btn-info" data-toggle="collapse" href="#collapse{{course.id}}">
                                Details
                                <i class="fa fa-toggle-down" id="toggle_course_{{course.id}}"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapse{{course.id}}" class="collapse hide" data-parent="#accordion">
                    <div class="card-body">
                        {% with course.get_quizzes as quizzes %}
                            {% if quizzes %}
                                <ul class="list-group">
                                  {% for quiz in quizzes %}
                                    <li class="list-group-item">
                                      <div class="row">
                                        <div class="col-md-8">
                                          {{quiz.description}}
                                        </div>
                                        <div class="col-md-2">
                                          <a href="{% url 'yaksh:monitor' quiz.id course.id%}" class="btn btn-primary">
                                            Monitor
                                          </a>
                                        </div>
                                      </div>
                                    </li>
                                  {% endfor %}
                                </ul>
                            {% else %}
                                <center>
                                    <p class="badge badge-danger badge-pill">
                                        No Quizzes
                                    </p>
                                </center>
                            {% endif %}
                        {% endwith %}
                    </div>
                </div>
            </div>
            <br>
        {% endfor %}
    </div>
    {% include "yaksh/paginator.html" %}

    {% elif msg == 'Monitor' and not objects %}
      <br>
      <div class="alert alert-info">
        <center><h3>No courses to monitor</h3></center>
      </div>
    {% endif %}
    {# ############################################################### #}
    {# This is rendered when we are just viewing exam/monitor/quiz_num #}
    {% if msg != "Monitor" %}
      {% if quiz %}
        {% if papers %}
          <div class="card">
              <div class="table-responsive">
                  <table id="course-detail" class="table">
                      <tr>
                          <td><b>Course Name:&nbsp</b></td>
                          <td>{{course.name}}</td>
                      </tr>
                      <tr>
                          <td><b>Quiz Name:&nbsp</b></td>
                          <td>{{quiz.description}}</td>
                      </tr>
                      <tr>
                          <td><b>Number of papers: &nbsp</b></td>
                          <td>{{papers|length}}</td>
                      </tr>
                      <tr>
                          <td><b>Papers Completed: &nbsp</b></td>
                          <td>
                              {% completed papers as completed_papers %}
                              <b>{{completed_papers}}</b>
                          </td>
                      </tr>
                      <tr>
                          <td><b>Papers in progress: &nbsp</b></td>
                          <td>
                              {% inprogress papers as inprogress_papers %}
                              <b>{{ inprogress_papers }}</b>
                          </td>
                      </tr>
                  </table>
              </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-4">
              <a href="{% url 'yaksh:show_statistics' papers.0.question_paper.id course.id %}" class="btn btn-primary">
                <i class="fa fa-line-chart"></i>&nbsp;Question Statistics
              </a>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#csvModal">
                <i class="fa fa-download"></i>&nbsp;Download CSV
              </button>
            </div>
          </div>
          <br>
          <table id="result-table" class="tablesorter table table-striped table-responsive-sm">
              <thead>
              <tr>
              <th> Name&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Username&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Roll No&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Institute&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Attempts&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Time&nbsp;<i class="fa fa-sort"></i> </th>
              <th> Status&nbsp;<i class="fa fa-sort"></i> </th>
              </tr>
              </thead>
              <tbody>
              {% for paper in latest_attempts %}
              <tr>
                  <td> <a href="{% url 'yaksh:user_data' paper.user.id paper.question_paper.id course.id %}">
                  {{ paper.user.get_full_name.title }}</a> </td>
                  <td> {{ paper.user.username }} </td>
                  <td> {{ paper.user.profile.roll_number }} </td>
                  <td> {{ paper.user.profile.institute }} </td>
                  <td> {{ paper.marks_obtained }} </td>
                  <td> {{ paper.answers.count }} </td>
                  <td id="time_left{{forloop.counter0}}"> {{ paper.time_left }} </td>
                  <td>{{ paper.status }}</td>
              </tr>
              {% endfor %}
              </tbody>
          </table>
          <!-- CSV Modal -->
          <div class="modal fade" id="csvModal" role="dialog">
              <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
              <div class="modal-header">
                <h3 class="modal-title">Download CSV for {{quiz.description}} </h3>
                <button type="button" class="close" data-dismiss="modal">
                  <i class="fa fa-close"></i>
                </button>
              </div>
              <form action="{% url 'yaksh:download_quiz_csv' course.id quiz.id %}" method="post">
              {% csrf_token %}
              <div class="modal-body">
                <b>Uncheck unwanted columns</b>
                <br>
                  {% for field in csv_fields %}
                  <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" name="csv_fields" type="checkbox" value="{{ field }}" checked> {{ field }}
                    </label>
                  </div>
                  <br>
                  {% endfor %}
                  <b>Select Attempt Number: Default latest attempt</b>
                  <select class="form-control" name = "attempt_number">
                      {%for attempt_number in attempt_numbers %}
                      {% if forloop.last %}
                      <option value="{{ attempt_number }}" selected>{{ attempt_number }} (Latest)</option>
                      {% else %}
                      <option value = "{{ attempt_number }}"> {{ attempt_number }}</option>
                      {% endif %}
                      {% endfor %}
                  </select>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-success">
                  <span class="fa fa-save"></span>&nbsp;Download
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                  Close
                </button>
              </div>
              </form>
              </div>
              </div>
          </div>
        {% else %}
          <div class="col-md-12">
            <div class="alert alert-warning">
              <center>
                <h4>No Users Found for {{ quiz.description }}</h4>
              </center>
            </div>
          </div>
        {% endif %} {# if papers #}
      {% else %}
        <h4>No Quiz Found</h4>
      {% endif %}
    {% endif %}
</div>
{% endblock %}
